<template>
    <div class="order_tab">
        <div @click="currentIndex = 0;">
            <span :class="{currentTab: currentIndex == 0}">{{text[0]}}</span>
        </div>
        <div @click="currentIndex = 1;">
            <span :class="{currentTab: currentIndex == 1}">{{text[1]}}</span>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'my_tab',
    props: {
      text: {
        type: Array,
        default: function () {
          return ['正常订单', '退换货订单'];
        },
      },
      submit_toggle: {
        type: Function,
        default: () => {
        },
      }
    },
    data()  {
      return {
        currentIndex: 0,
      }
    },
    methods: {},
    watch: {
      currentIndex: function () {
        this.$emit('submit_toggle', this.currentIndex);
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    @import "../../css/common";
    .order_tab {
        display: flex;
        flex-direction: row;
        border-bottom: 1px solid @line-color;
        background-color: #fff;
        > div {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 88px;
            font-size: 28px;
            color: @color;
            > span {
                display: flex;
                align-items: center;
                height: 88px;
                border-bottom: 6px solid transparent;
                box-sizing: border-box;
            }
            .currentTab {
                color: @color_orange;
                border-bottom: 6px solid @color_orange;
            }
        }
    }
</style>
